
<template>
  <div id="wrapper">
    <nav class="top">
      <a href="">
        <router-link :to="{name: 'jiakefu/kefu'}">
        <img class="left" src="../../assets/img/img.../xingzhuang164.png" alt="">
        </router-link>
      </a>
      <span class="wenzi">选择咨询的订单</span>
    </nav>

    <!--全部订单-->
    <div class="order">
      <ul>
        <img src="../../assets/img/kefufankui/wuliu/star.png" alt="">
        <li><a href="">国家直邮</a></li>
      </ul>
    </div>
    <hr>
    <div class="number">
      <ul>
        <li>订单编号: 1485269676465</li>
        <li class="number-dai">交易完成</li>
      </ul>
    </div>
    <hr>
    <!--图片信息部分-->
    <div class="my">
      <div class="my-left">

        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
        <img class="img2" src="../../assets/img/personal/shangpintu.png" alt="" >
      </div>
    </div>

    <!--应付-->
    <div class="pay">
      <div class="pay-pay">
      <span>
        <a href="">
          发表心得
        </a>
      </span>
        <span>
        <a href="">
          退货退款
        </a>
      </span>
      </div>
    </div>
    <hr>

  </div>

</template>
<script>
  export default {

  }
</script>
<style scoped>
  #wrapper{
    width: 100%;
  }
  .top{
    position: relative;
    width: 100%;
    height: 3rem;
    background-color: #e53e42;
  }
  .wenzi{
    font-family: MicrosoftYaHei;
    font-size: 0.7rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 2.25rem;
    letter-spacing: 0.04rem;
    color: white;
    position: absolute;
    top: 1rem;
    left: 6rem;
  }
  img{
    width: 0.5rem;
  }
  .left {
    position: absolute;
    top: 1.5rem;
    left: 0.7rem;
  }

  /*<!--全部订单-->*/
  .order ul li {
    display: inline-block;
    font-size:0.8rem;
    font-weight: 200;
    margin-left: 0.5rem;

  }
  .order ul li a{
    color:  #333333;
  }

  /*订单编号*/
  .number ul li{
    display: inline-block;
    font-size:0.66rem;
    font-weight: 200;
    margin-left: 0.9rem;

  }
  .number-dai{
    color: #e53e42;

  }
  /*商品内容*/
  .my{
    overflow: hidden;
  }
  .my-left .img2{
    float: left;
    margin: 1rem;
    margin-top: 0.9rem;
    width: 1.5rem;
    text-align: center;
  }
  /*右面文字部分*/

  .content-bot span{
    font-size:0.7rem;
    color: #808080;
  }
  /*最下面应付*/
  .pay{
    height: 2rem;
  }
  .pay-pay{
    margin-left: 5rem;

  }
  .pay span{
    font-size: 0.6rem;
    margin-left: 2.3rem;

  }
  .pay span a {
    font-size:0.6rem;
    color: white;
    background: #e53e42;
    border-radius: 0.2rem;


  }

</style>

